/*********************** Generales ***********************/

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html {
	height:100%;
}
body {
    text-align: center;
	background-color: #2F2C29;
	/*background-image:url('../images/modeler-background.png');*/
	background-image:url('../images/modeler-background2.png');
    background-repeat:no-repeat;
    background-position:right top;
	margin:0px auto;
	padding:0px;
	font: 13px/1.5 helvetica, arial, san-serif;
	height: 100%;
}
h1, h2 { text-align:center; }
h2 {
	position:absolute;
	font: 13px/1.5 helvetica, arial, san-serif;
	top: 15px;
	right: 115px;
	color:#fff;
	text-shadow:0 0 10px rgba(0, 0, 0, 0.75);
	display:none;
}
p { margin:0; }

img {
  border: none;
}

[draggable=true] {
	cursor: move;
}
/*********************** ----------- ***********************/

/*********************** Contenedor global ***********************/
#containt {
    position: relative;
    text-align: left;
	font: 13px/1.5 helvetica, arial, san-serif;
  	width:960px;
	padding:0;
    margin:0px auto;
    list-style:none;
    height: 100%;
    background-color:#B3AFAA;
}
/*********************** ----------- ***********************/


#minilogo {
    position:fixed;
    bottom:35px;
    left:35px;
}


/*********************** FORMULARIO ***********************/
#form {
    float:left;
    width:90%;
    height: 93%;
    overflow: auto;
}

#form .formname {
	/*color: #FFF;*/
	color: #4A4A4A;
	}
#labelgeo {
    color: #4A4A4A;
    margin: 0 0 0 35px;
    }
	
    /************************ SECTION ************************/
#form ul {
    margin: 0px 30px 20px 30px;
    padding: 15px 0px 20px 0px;
    border: 1px dashed #000;
    /*-moz-border-radius: 5px;
    border-radius: 5px;*/
}

#form ul.selected {
    border-color: #E01B1B;
}

#form .sectionlabel {
    font: bold 14px/1.5 helvetica, arial, san-serif;
    margin: 0px 0px 0px 10px;
}
    /*********************** ----------- ***********************/

    /************************ FIELDS ************************/
#form li {
	list-style:none;
	/*border-bottom:1px solid #494949;*/
	background-image:url('../images/icons/empty.png');
    background-repeat:no-repeat;
    background-position:2px 12px;
    margin:5px 0px 0px 0px;
    padding:20px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

#form li p.fieldlabel {
	margin:0px 0px 0px 40px;
}

#form li .actions {
    float:right;
}

#form li .actions .fieldButton {
    margin: 0px 20px;
    position:relative;
    top:-5px;
}

#form li .actions .fieldRequired {
    margin: 0px 30px 0px 20px;
    position:relative;
    width: 16px;
    height: 16px;
    top:-5px;
    background-image:url('../images/bug.png');
}

#form li .actions .fieldRequired {
    margin: 0px 30px 0px 20px;
    position:relative;
    padding:16px;
    top:-5px;
    background-image:url('../images/send_icon.png');
}

#form li .actions .fieldNotRequired {
    margin: 0px 30px 0px 20px;
    position:relative;
    padding:16px;
    top:-5px;
    background-image:url('../images/bug.png');
}

#form li div.properties {
    display:none;
    padding:20px;
    margin: 0px 0px 12px 0px;
    background-color: #DEDEDE;
    -moz-border-radius: 12px;
    border-radius: 12px;
    position: relative;
    top: 20px;
    font-weight:bold;
    color: #8C8C8C;
    }
    
#form li div.properties .propertylabel {
    margin: 0 0 0 5px;     
    color: #000; 
    }
    
#form li div.properties .propertyvalue {
    margin: 0 0 0 20px; 
    font-weight:normal;
    color: #000;       
    }

#form li div.options {
    display:none;
    padding:20px;
    margin: 0px 0px 12px 0px;
    background-color: #DEDEDE;
    -moz-border-radius: 12px;
    border-radius: 12px;
    position: relative;
    top: 20px;   
    font-weight:bold;
    color: #8C8C8C;
    }
    
#form li div.options .optionlabel {
    margin: 0 0 0 5px;
    color: #000;      
    }
    
#form li div.options .optionvalue {
    margin: 0 0 0 20px;
    font-weight:normal;
    color: #000;      
    }
    
#form li div.options .addoptionbutton {
    margin: 0 0 10px 0;       
    }

#form li div.options .optionbutton {
	margin: 0 0 0 25px; 
    vertical-align:middle;
    }
    
    /*********************** ----------- ***********************/
    
/*********************** ----------- ***********************/

/************************ SECTIONLINKS ************************/
#sections {
	position:absolute;
	bottom:0px;
	width:90%;
	height:7%;
	min-height:35px;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
	}
	
#sections ul li {
	display:inline;
	}

#sections ul li a {
	margin:0px 10px 0px 0px;
	}

#sections ul li a:link { 
    font-weight: bold; 
    text-decoration: none; 
    color: #DEDEDE;
    }
#sections ul li a:visited { 
    font-weight: bold; 
    text-decoration: none; 
    color: #DEDEDE;
    }
#sections ul li a:hover, #sections ul li a:active { 
    text-decoration: underline; 
    color: #454545;
    }
/*********************** ----------- ***********************/


/** Estilos div resultado **/
/** --------------------- **/

#resultado {
	width:700px;
	position:absolute;
	top:60px;
	left:50%;
	margin:0px auto auto -399px;
	text-align:center;
	background-color: #BD8F8F;
	display: none;
	}
#resultado img.delete {
	float:right;
	}

.prueba{
    margin:20px;
    padding:10px;
}

.pruebaerror {
	font-weight: bold;
	color: #910000;
	margin-bottom:20px;
	}

/************************ FIELDTYPES ************************/
#form li.text {
    background-color:#F0E4BD;
    background-image:url('../images/fields/tw_icon_text.png');
}
#form li.text div.properties {
    background-color:#D6CCA9;
}

#form li.textarea {
    background-color:#F0BDC0;
    background-image:url('../images/fields/tw_icon_text.png');
}

#form li.numeric {
    /*background-color:#778acb;*/
    background-color:#9EAEE5;
    background-image:url('../images/fields/tw_icon_numeric.png');
}

#form li.radio {
    /*background-color:#a25656;*/
    background-color:#D18787;
    background-image:url('../images/fields/tw_icon_radio.png');
}

#form li.location {
    background-color:#B0FFFB;
    background-image:url('../images/fields/tw_icon_location.png');
}

#form li.image {
    /*background-color:#86b58d;*/
    background-color:#B0DAB5;
    background-image:url('../images/fields/tw_icon_image.png');
}

#form li.checkbox {
	background-color:#DAF0BD;
    /*background-color:#E2BDF0;*/
    background-image:url('../images/fields/tw_icon_check.png');
}

#form li.combo {
    background-color:#FAEF78;
    background-image:url('../images/fields/tw_icon_combo.png');
}

#form li.date {
    background-color:#a5c2d1;
    background-image:url('../images/fields/tw_icon_date.png');
}
/*********************** ----------- ***********************/


/*********************** SideBar FIELDS ***********************/
#fieldsBar {
    float:right;
	width:10%;
    height: 100%;
    font: 10px/1.5 helvetica, arial, san-serif;
    padding:0px;
    margin:0px auto;
    background-color: #F0EDEA;
}
#fieldsBar ul li {
	display:inline;
}

#fieldsBar ul li a.item {
	float:right;
	width:90px;
	height:48px;
	margin:5px auto;
	text-align:center;
	text-decoration:none;
	color: #000;
	overflow:visible;
}
#fieldsBar ul li a.item img {
	border:0;
	margin:4px auto;
}

#fieldsBar ul li a.item div {
    display:none;
}

#fieldsBar ul li a.item div.label {
	text-align:center;
	background:rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.75);
	position:relative;
	bottom:36px;
	left:-80px;
	/*bottom:0px;*/
	/*vertical-align:bottom;*/
	color:#f3f3f3;
	padding:5px;
	display:none;
}
/*********************** ----------- ***********************/


/*********************** BUTTONS ***********************/
.buttons {
	text-align:center;
	line-height:40px;
	width: 96px;
	position: absolute;
	bottom:30px;
	}
.buttons a.button {
    padding: 7px 10px;
    background-color: #777;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #666;
    }
.buttons a.button[class]:hover {
    background-color: #333;
    padding: 10px 10px;
    }
.buttons a.button[class] img {
    vertical-align:middle;
    }
.buttons a.button.red { background-color: #e50000; }
.buttons a.button.purple { background-color: #9400bf; }
.buttons a.button.green { background-color: #528020; }
.buttons a.button.orange { background-color: #ff9c00; }
.buttons a.button.blue { background-color: #2c6da0; }
.buttons a.button.black { background-color: #333; }
.buttons a.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
.buttons a.button.white:hover { color:#fff; text-shadow: 1px 1px #000;} 
.buttons a.button.small { font-size: 75%; }
.buttons a.button.large { font-size: 125%; }
/*********************** ----------- ***********************/
